<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <!--    引入vue路由js文件-->
    <script src="../js/vue-router.js"></script>
</head>
<body>

<div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <hr>
    <h3>路由切换的方式1 超链接a</h3>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <hr>

    <!--   router-link实现路由的切换 本质还是超链接  -->
    <h3>路由切换的方式2 router-link  to:string</h3>
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr>

    <h3>路由切换的方式3 router-link  to:object</h3>
<!--    <router-link :to="{path:'/login'}">登录</router-link>-->
<!--    <router-link :to="{path:'/register'}">注册</router-link>-->

<!--     使用path完成路由的切换存在耦合关系 不利于代码的维护  使用name可以实现解耦 -->
    <router-link :to="{name:'login'}">登录</router-link>
    <router-link :to="{name:'register'}">注册</router-link>
    <hr>
<!--    使用javascript代码实现路由切换-->
    <h3>路由切换的方式4 javascript代码</h3>
    <button @click="login">登录</button>
    <button @click="register">注册</button>

</div>

<script>

    //    定义登录组件
    const login = {
        template: `
        <div>
            <h2>欢迎登录</h2>
            <form action="javascript:;">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <button>立即登录</button>
            </form>
        </div>
        `
    }

    // 定义注册组件
    const register = {
        template: `
        <div>
            <h2>欢迎注册</h2>
            <form action="javascript:;">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <button>立即登录</button>
            </form>
        </div>
        `
    }

    // 定义404组件
    const filenotfound = {
        template: `
            <div>
                    页面找不到,请重试
            </div>
        `
    }

    // 定义路由列表
    const routes = [
        {
            path: "/",
            redirect: '/login',
        },
        {
            path: '/login',
            component: login,
            name:'login'
        },
        {
            path: '/register',
            component: register,
            name:'register'
        }, {
            path: '/**',
            component: filenotfound
        }
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes
    })

    // 4.创建和挂载根实例。
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login(){
                // 如何通过js代码实现路由切换  路由管理对象
                // this.$router.push("/login")
                this.$router.push({path:'/login'})
            },
            register(){
                // this.$router.push("/register")
                this.$router.push({name:'register'})
            }
        },
        router
    })

</script>
</body>
</html>